<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>高清无码管理系统 - Layui</title>
    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}

        <!-- 引入公共页面 -->

        {{include "./common/side_menu.html" }}


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;"></div>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 1000px;height:400px;"></div>
        </div>



    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="/layui-v2.6.8/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作111', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作234</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });


        // 初始化图表
        function loadGraph(cates, count) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '文章数统计'
                },
                tooltip: {},
                legend: {
                    data: ['篇数']
                },
                xAxis: {
                    data: cates
                },
                yAxis: {},
                series: [{
                    name: '篇数',
                    type: 'bar',
                    data: count
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function initData() {
            let name = []
            let counts = []
            // 发送ajax请求，获取文章分类总数
            $.get('/cateArticleCount', res => {

                res.forEach(item => {
                    if (item.name) {
                        name.push(item.name)
                        counts.push(item.count)
                    }
                })
               
                // 渲染图标
                loadGraph(name,counts);

            }, 'json')
        }

        initData();
    </script>
</body>

</html>